<template>
  <div class="v-computed">
    <h2 class="title">Computed计算属性</h2>
    <div>
      <h3 class="title-sub">处理模板中复杂的逻辑</h3>
      <span>{{msg.split('').reverse().join('')}}</span>
      <span>{{reverseMsg}} 计算属性</span>
    </div>
    <div>
      <h3 class="title-sub">计算属性VS方法</h3>
      <span>{{dataNow1}}</span>
      <span>{{dataNow2()}}</span>
      <p>
        计算属性VS方法<br>
        1.使用方法必须加上()<br>
        2.只有msg发生变化时, 才会触发reverseMsg, 方法中reverseMsg方法每次进入页面都会执行
      </p>
    </div>
    <div>
      <h3 class="title-sub">计算属性VS侦听器</h3>

      <p>
        计算属性VS侦听器<br>
        1.computed用来监听自己定义的变量, 该变量不存在data中, 直接在computed里面定义<br>
        2.watch主要用于监控vue实例的变化，它监控的变量当然必须在data里面声明才可以，它可以监控一个变量，也可以是一个对象
      </p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ComputedDemo',
  data () {
    return {
      msg: 'Hello World'
    }
  },
  computed: {
    reverseMsg () {
      console.log(1)
      return this.msg.split('').reverse().join('')
    },
    dataNow1 () {
      return Date.now()
    }
  },
  methods: {
    dataNow2 () {
      return Date.now()
    }
  }
}
</script>

<style lang="scss" scoped>
.v-computed {
  padding: 20px;
  .title {
    font-size: 24px;
    font-weight: 700;
  }
  .title-sub {
    font-size: 18px;
    font-weight: 600;
  }
}
</style>
